<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>House Price Scatter</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <!-- Load CSS -->
  <link href="{{url_for('static', filename='css/style.css')}}" rel="stylesheet" type="text/css" />
  <!-- Load Fonts -->
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic" type="text/css" />
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" type="text/css" />
  <!-- Load jQuery library -->
  <script type="text/javascript" src="{{url_for('static', filename='scripts/jquery-1.6.2.min.js')}}"></script>
  <!-- Load custom js -->
  <script type="text/javascript" src="{{url_for('static', filename='scripts/panelslide.js')}}"></script>
  <script type="text/javascript" src="{{url_for('static', filename='scripts/custom.js')}}"></script>
  <!-- Load topcontrol js -->
  <script type="text/javascript" src="{{url_for('static', filename='scripts/scrolltopcontrol.js')}}"></script>
  <!-- Load NIVO Slider -->
  <link rel="stylesheet" href="{{url_for('static', filename='css/nivo-slider.css')}}" type="text/css" media="screen" />
  <link rel="stylesheet" href="{{url_for('static', filename='css/nivo-theme.css')}}" type="text/css" media="screen" />
  <script src="{{url_for('static', filename='scripts/jquery.nivo.slider.pack.js')}}" type="text/javascript"></script>
  <script src="{{url_for('static', filename='scripts/nivo-options.js')}}" type="text/javascript"></script>
  <!-- Load fancybox -->
  <script type="text/javascript" src="{{url_for('static', filename='scripts/jquery.fancybox-1.3.4.pack.js')}}"></script>
  <script type="text/javascript" src="{{url_for('static', filename='scripts/jquery.easing-1.3.pack.js')}}"></script>
  <script type="text/javascript" src="{{url_for('static', filename='scripts/jquery.mousewheel-3.0.4.pack.js')}}"></script>
  <link rel="stylesheet" href="{{url_for('static', filename='css/jquery.fancybox-1.3.4.css')}}" type="text/css" media="screen" />
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="{{url_for('static', filename='css/d3Style.css')}}">
</head>
<body>
  <!--This is the START of the content-->
    <div class="row">
        <div class="col-xs-12  col-md-9" style = "margin-top:100px">
          <div id="scatter">
          </div>
        </div>

        <div class = "col-xs-12 col-md-9" style = "margin-left:400px; margin-bottom:100px">
            <label for="selDataset">Initial Or Preprocessed:</label>
            <select id="selDataset" onchange="optionChanged(this.value)"></select>
        </div>

    </div>

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script type="text/javascript" src="{{url_for('static', filename='js/scatter.js')}}"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js"></script>

  <!--END of content-->
</body>
</html>